<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/util/utils.css" />
		<style>
			input[type=checkbox]{
		        -webkit-appearance: none;
		        appearance: none;
		        width: 14px;
		        height: 14px;
		        margin: 3px 0px 0px 0px;
		        cursor: pointer;
		        vertical-align: bottom;
		        background: #fff;
		        border: 1px solid green;
		        -webkit-border-radius: 1px;
		        -moz-border-radius: 1px;
		        border-radius: 3px;
		        -webkit-box-sizing: border-box;
		        -moz-box-sizing: border-box;
		        box-sizing: border-box;
		        position: absolute;
			}
			
			input[type=radio]{
				-webkit-appearance: none;
		        appearance: none;
		        width: 13px;
		        height: 13px;
		        margin: 3px 0px 0px 0px;
		        cursor: pointer;
		        vertical-align: bottom;
		        background: #fff;
		        border: 1px solid green;
		        -webkit-border-radius: 4px;
		        -moz-border-radius: 5px;
		        border-radius: 6px;
		        -webkit-box-sizing: border-box;
		        -moz-box-sizing: border-box;
		        box-sizing: border-box;
		        position: absolute;
			}
			
			input[type=checkbox]:active{
		        border-color: green;
		        background: #ebebeb;
			}    
			
			input[type=radio]:active{
				border-color: green;
		        background: #ebebeb;
			}   
			        
			input[type=checkbox]:hover {
		        border-color: #c6c6c6;
		        -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
		        -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
		        box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
			}
			
			input[type=checkbox]:checked {
		        background: #fff;
			}
			
			input[type=radio]:checked{
				background: #fff;
			}
			
			input[type=checkbox]:checked::after {
		        content: url(../../img/evaluation/checkbox.jpg);
		        display: block;
		        position: absolute;
		        top: -5px;
		        right: 0px;
		        left: -5px
			}
			
			input[type=radio]:checked::after {
		        content: url(../../img/evaluation/radio.png);
		        display: block;
		        position: absolute;
		        top: -5px;
		        right: 0px;
		        left: -5px;
		        -webkit-border-radius: 4px;
		        -moz-border-radius: 5px;
		        border-radius: 6px;
		        -webkit-box-sizing: border-box;
		        -moz-box-sizing: border-box;
		        box-sizing: border-box;
			}
			
			input[type=checkbox]:focus {
		        outline: none;
		        border-color: green;
			}
			
			.exemtitle{
				background-color: #c9dee2;
				margin-top: 6px;
				color: #5a5a5a;
				padding-top: 4px;
				padding-left: 25px;
				font-size: 17px;
			}
			
			.answerArr{
				background-color: #f3f7f8;
				padding-top: 6px;
				margin-left: 10px;
				margin-right: 10px;
				color: #909090;
				padding-left: 25px;
				font-size: 16px;
			}
			
			.answerevy{
				padding-top: 3px;
			}
			
			.dvsubmit{
				text-align: center;
				margin-top: 30px;
			}
			
			.submitAnswer{
				width: 80%;
				height: 35px;
				text-align: center;
				background-color: #00A8C6;
				color: #FFFFFF;
				font-size: 16px;
			}
			
			.answerevy{
				display: flex;
			}
			
			.answerevy span{
				display: block;
				margin-left: 16px;
			}
			
			.answerevy input{
				display: block;
			}
			
			.mui-popup-button{
				color: #fc483a;
			}
			
			.mui-popup-button-bold{
				color: #00A8C6;
			}
			
			.mui-popup-inner{
				color: #5A5A5A;
			}
		
		</style>
	</head>
	<body>
		<div class="mui-content" style="background-color: white; margin-left: 5px; margin-right: 5px;">
			<div id="exemlst">
				<!--<div>
					<div id="exemtitle" class="exemtitle">
						<span>1、你孩子会开怀大笑吗？</span>
					</div>
					<input type="hidden" name="correctAnswer" />
					<input type="hidden" name="selectAnswer" />
					<input type="hidden" name="questionType" />
					<div id="answerArr" class="answerArr">
						<div id="answerevy" class="answerevy">
							<input type="checkbox" name="ch" />&nbsp;&nbsp;
							<span>A</span>&nbsp;
							<span>常开怀大笑</span> 
						</div>
						
						<div id="answerevy" class="answerevy">
							<input type="checkbox" name="ch" />&nbsp;&nbsp;
							<span>B</span>&nbsp;
							<span>有时大笑</span>
						</div>
						
						<div id="answerevy" class="answerevy">
							<input type="checkbox" name="ch" />&nbsp;&nbsp;
							<span>C</span>&nbsp;
							<span>很少大笑</span>
						</div>
						
						<div id="answerevy" class="answerevy">
							<input type="checkbox" name="ch" />&nbsp;&nbsp;
							<span>D</span>&nbsp;
							<span>不好说</span>
						</div>
						
						<div id="answerevy" class="answerevy">
							<input type="checkbox" name="ch" />&nbsp;&nbsp;
							<span>E</span>&nbsp;
							<span>从不大笑</span>
						</div>
						
					</div>
				</div>
				
				<div>
					<div id="exemtitle" class="exemtitle">
						<span>2、你孩子会开怀大笑吗？</span>
					</div>
					<div id="answerArr" class="answerArr">
						<div id="answerevy" class="answerevy">
							<input type="radio" name="qw" />&nbsp;&nbsp;
							<span>A</span>&nbsp;
							<span>常开怀大笑</span>
						</div>
						
						<div id="answerevy" class="answerevy">
							<input type="radio" name="qw" />&nbsp;&nbsp;
							<span>B</span>&nbsp;
							<span>有时大笑</span>
						</div>
						
						<div id="answerevy" class="answerevy">
							<input type="radio" name="qw" />&nbsp;&nbsp;
							<span>C</span>&nbsp;
							<span>很少大笑</span>
						</div>
						
						<div id="answerevy" class="answerevy">
							<input type="radio" name="qw" />&nbsp;&nbsp;
							<span>D</span>&nbsp;
							<span>不好说</span>
						</div>
						
						<div id="answerevy" class="answerevy">
							<input type="radio" name="qw"/>&nbsp;&nbsp;
							<span>E</span>&nbsp;
							<span>从不大笑</span>
						</div>
						
					</div>
				</div>-->
				
			</div>
			<input type="hidden" id="testNum" value=""/>
			<div class="dvsubmit">
				<button id="submitAnswer" class="submitAnswer">提交</button>
			</div><br /><br />
		</div>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/utils/http.utils.js"></script>
	<script src="../../js/bus/pubfun.js"></script>
	<script src="../../js/jquery-1.8.3.min.js"></script>
	<script>
	
		var $exemId = getQueryString(window.location.search, "exemid");
		
		var $userLogin = JSON.parse(localStorage.getItem("login-user-parent"));
		
		window.onload = function(){
			
			var $evalId = getQueryString(window.location.search, "evalid");
			switch ($evalId){
				case "3":
					document.title = "3有评测";
					break;
				case "4":
					document.title = "4要评测";
					break;
				case "5":
					document.title = "5会评测";
					break;
				default:
					document.title = "上岗测试";
					break;
			}
			
			getQuestionsForId();
		}
		
		var $jumpUrl;
		var $successUrl;
		switch ($exemId){
			case "12":
				$jumpUrl = "index.html";
				$successUrl = "exemres3.html";
				break;
			case "13":
				$jumpUrl = "index.html";
				$successUrl = "exemres4.html";
				break;
			case "14":
				$jumpUrl = "index.html";
				$successUrl = "exemres5.html";
				break;
			case "15":
				$jumpUrl = "../parclarom/index.html";
				break;
			default:
				$successUrl = "../parclarom/index.html";
				break;
		}
		
		mui("#exemlst").on("tap", ".answerevy", function(){
			var $auswerType = this.firstElementChild.getAttribute("type");
			if($auswerType == "checkbox"){ //多选题
				if(this.firstElementChild.checked == false){
					this.firstElementChild.setAttribute("checked", "checked")
				} else {
					this.firstElementChild.removeAttribute("checked");
				}
			} 
			
			if($auswerType == "radio"){ //单选题
				//获取所有选项
				/*var $evyxx = document.getElementsByName(this.firstElementChild.getAttribute("name"));
				for(var i = 0; i < $evyxx.length; i ++){
					$evyxx[i].checked = false;
				}*/
				
				if(this.firstElementChild.checked == false){
					this.firstElementChild.checked = true;
				} else {
					console.log("true = " + this.firstElementChild.checked)
					this.firstElementChild.checked = false;
				}
			}
			
		});
		
		function getQuestionsForId(){
			mui.ajax({
				url : $request_url.testPaper,
				type : "get",
				dataType : "json",
				headers: {
					"Authorization": $headers_authorization
				},
				data : {
					testPaperId : $exemId
				},
				success : function(dat){
					if(dat.code == 0){
						var $divExemLst = document.getElementById("exemlst");
						var testLst = dat.result.questions;
						for(var i = 0; i < testLst.length; i ++){
							var $div = document.createElement('div');
							$div.innerHTML = createQuestionHtmlTem(testLst[i], i);
							$divExemLst.appendChild($div);
						}
						document.getElementById("testNum").value = testLst.length;
					}
				}, error : function(err){
					
				}
			});
		}
		
		/**
		 * 创建每题html
		 * @param {Object} $info
		 * @param {Object} $num
		 */
		function createQuestionHtmlTem($info, $num){
			var $type = $info.type;
			var $ansType = "radio";
			if($type == 1){
				$ansType = "radio";
			}
			
			if($type == 2){
				$ansType = "checkbox";
			}
			
			var $evyAns = "";
			var $answerHtml = 
			'<div data="'+ $info.questionId +'">'
			+	'<div id="exemtitle" class="exemtitle">'
			+		'<span>'+ ($num + 1) +'、'+ $info.questionContent.title +'</span>'
			+	'</div>'
			+	'<input type="hidden" value="'+ $info.answer +'" name="correctAnswer'+ $num +'" />'
			+	'<input type="hidden" name="selectAnswer'+ $num +'" />'
			+	'<input type="hidden" value="'+ $info.knowledgePoint +'" name="questionType'+ $num +'" />'
			+	'<div id="answerArr" class="answerArr">';
			if($info.type == 1 || $info.type == 2){
				for(var $obj in $info.questionContent.choiceList){
				//for(var j = 0; j < $info.questionContent.choiceList.length; j ++){
					//var $ansObjs = $info.questionContent.choiceList[j];
					$evyAns += 
						'<div id="answerevy" class="answerevy">'
						+	'<input type="'+ $ansType +'" value="'+ $obj +'" name="question'+ $num +'"/>&nbsp;&nbsp;'
						+	'<span>'+ $obj +'</span>&nbsp;'
						+	'<span>'+ $info.questionContent.choiceList[$obj] +'</span>' 
						+'</div>';
				}
			}
			
			if($info.type == 3){
				for(var $obj in $info.questionContent.choiceList){
				//for(var j = 0; j < $info.questionContent.choiceList.length; j ++){
					//var $ansObjs = $info.questionContent.choiceList[j];
					$evyAns += 
						'<div id="answerevy" class="answerevy">'
						+	'<input type="'+ $ansType +'" value="'+ $obj +'" name="question'+ $num +'"/>&nbsp;&nbsp;'
						+	'<span>'+ $info.questionContent.choiceList[$obj] +'</span>' 
						+'</div>';
				}
			}
			
			$answerHtml = $answerHtml + $evyAns;
			$answerHtml = $answerHtml + "</div></div>";
			return $answerHtml; 
		}
		
		document.getElementById("submitAnswer").addEventListener("tap", function(){
			var $iptfix = "question";
			var $testConnt = document.getElementById("testNum").value; //获取题总数
			var $answer = "";
			for(var i = 0; i < $testConnt; i ++){
				var $question_answer = document.getElementsByName($iptfix + i); 
				var $question_desc = "";
				for(var j = 0; j < $question_answer.length; j ++){
					if($question_answer[j].checked){
						$question_desc += $question_answer[j].value + ".";
					}
				}
				$answer += $question_desc.substr(0, $question_desc.length - 1) + ",";
			}
			$answer = $answer.substr(0, $answer.length - 1);
			
			$aswNum = fun_checkAnswer($answer);
			if($aswNum > 0){
				var btnArray = ["仍要退出", "继续做题"];
			    mui.confirm("你还有"+ $aswNum +"道题目没能完成，未能提交。", "评测", btnArray, function(e){
			        if (e.index == 0)  {
			        	mui.openWindow({
			        		url : $jumpUrl
			        	});
			        }  else  {
			            //继续做题
			        }
			    });
				return;
			} else {
				mui.ajax({
					url : $request_url.saveAnswer,
					type : "post",
					dataType : "json",
					headers: {
						"Authorization": $headers_authorization
					},
					data : {
						userId : $userLogin.userId,
						testPaperId : $exemId,
						answers : $answer
					},
					timeout : 10000,
					success : function(dat){
						if(dat.code == 0){//提交成功
							var btnArray = ["退出", "重新做题"];
						    mui.confirm("恭喜你完成我们的评测。", "评测", btnArray, function(e){
						        if (e.index == 0)  {
						        	mui.openWindow({
						        		url : $successUrl
						        	});
						        }  else  {
						            //继续做题
						        }
						    });
						} else {
							mui.toast(dat.message);
							return;
						}
					}, error : function(err){
						mui.toast("提交失败，超等片刻在提交吧");
						return;
					}
				});
			}
		});
		
		/**
		 * 判断当前还有未答题数
		 * @param {Object} $ans
		 */
		function fun_checkAnswer($ans){
			var $nullCount = 0;
			var $ansArr = $ans.split(",");
			for (var i = 0; i < $ansArr.length; i ++) {
				if($ansArr[i] == null || $ansArr[i] == "" || $ansArr[i] == undefined){
					$nullCount ++;
				}
			}
			return $nullCount;
		}
		
	</script>
</html>
